<template>
  <div class="data-item">

    <div class="data-item-header height10">
      <Superscript :leftTop="false" :leftBottom="false" :rightBottom="false"></Superscript>

      <div class="middle-header-info-count">
        <div class="middle-header-info-count-item" v-for="(item, index) in dayTotal" :key="index">
          <div class="middle-header-info-count-item-label">{{ dayLabel[index] }}</div>
          <count size="large" :endVal="item.yesterday" :id="`myRealTotal_${index}`" class="middle-count"></count>
          <div class="middle-plan-finish">
            <div class="middle-plan-finish-item plan">
              计划
              <count size="mini" type="white" :endVal="item.yesterdayPlan" :id="`myPlanTotal_${index}`"></count>
            </div>
            <div class="middle-plan-finish-item finish">
              完成率
              <count size="mini" type="warning" :endVal="mathFinish(item.yesterday, item.yesterdayPlan)" unit="%" :decimals="parseInt(2)" :id="`myFinishTotal_${index}`"></count>
            </div>
          </div>
          <div class="border-right"></div>
        </div>
      </div>
    </div>

    <div class="data-item-body height88" :class="mapScreenVisible ? 'map-screen-open' : ''" style="background-image: url('../../../../static/img/map_bg.png')">
      <div class="traffic-map">
        <i class="map-toggle"
           :class="mapScreenVisible ? 'fa fa-compress' : 'fa fa-expand'"
           @click="setMap" :title="mapScreenVisible ? '点击按钮缩小地图' : '点击按钮放大地图'">
        </i>
        <transition name="slide-fade">
          <router-view class="traffic-map-info"></router-view>
        </transition>
      </div>
    </div>


  </div>
</template>

<script>
  import { mapState,mapActions } from 'vuex'
  import { Superscript, count } from '../../../components'

  export default {
    components: { Superscript, count },
    data () {
      return {
        dayLabel: [ '昨日收入', '昨日里程', '昨日客流']
      }
    },
    mounted () {
//      this.getDayTotal()
    },
    computed: {
      ...mapState(['mapScreenVisible', 'dayTotal'])
    },
    methods: {
      mathFinish (day, plan) {
        const num = day / plan * 100
        return num.toFixed(2)
      },
      setMap () {
        this.mapScreenVisible ? this.$store.dispatch('setMapScreenVisible', false) : this.$store.dispatch('setMapScreenVisible', true)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import './index.styl';
</style>
